রিয়েল-টাইম ডেটা আপডেট তৈরি করতে HTMX এর hx-ws Attribute ব্যবহার করে WebSocket সংযোগ তৈরি করা যায়। WebSocket ব্যবহার করে সার্ভার এবং ক্লায়েন্টের মধ্যে একটি স্থায়ী সংযোগ স্থাপন করা হয়, যার মাধ্যমে সার্ভার থেকে ক্লায়েন্টে সরাসরি ডেটা পাঠানো যায়। HTMX এর hx-ws Attribute দিয়ে WebSocket এর মাধ্যমে রিয়েল-টাইমে ডেটা আপডেট করা সহজ এবং সরাসরি HTML এ রেন্ডার করা সম্ভব।
নিচে HTMX এবং Python Flask ব্যবহার করে একটি রিয়েল-টাইম ডেটা আপডেট উদাহরণ দেখানো হলো।
উদাহরণ: HTMX এর মাধ্যমে রিয়েল-টাইম ডেটা আপডেট
ধাপ ১: প্রয়োজনীয় প্যাকেজ ইনস্টল করা
প্রথমে Flask এবং Flask-SocketIO প্যাকেজ ইনস্টল করতে হবে, যেগুলি WebSocket সংযোগের জন্য ব্যবহৃত হবে।
pip install flask flask-socketio
ধাপ ২: Flask WebSocket সার্ভার তৈরি করা
একটি Flask অ্যাপ্লিকেশন তৈরি করে WebSocket সংযোগের মাধ্যমে প্রতি কিছু সময় পরপর ক্লায়েন্টে ডেটা প্রেরণ করা হবে।
server.py
# server.py
from flask import Flask, render_template
from flask_socketio import SocketIO
import time
import threading
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'
socketio = SocketIO(app)
@app.route('/')
def index():
return render_template('index.html') # এখানে HTML ফাইলটি রেন্ডার করা হবে
# Real-time updates function
def send_real_time_updates():
while True:
socketio.sleep(5) # প্রতি ৫ সেকেন্ড পরপর আপডেট পাঠানো হবে
current_time = time.strftime("%H:%M:%S") # বর্তমান সময়
socketio.emit('update', {'data': f'Current time is {current_time}'})
# WebSocket connection setup
@socketio.on('connect')
def handle_connect():
print('Client connected')
if __name__ == '__main__':
# ব্যাকগ্রাউন্ড টাস্কে real-time updates ফাংশন চালানো
threading.Thread(target=send_real_time_updates).start()
socketio.run(app)
ব্যাখ্যা
send_real_time_updates: প্রতি ৫ সেকেন্ড পরপর বর্তমান সময় পাঠায়, যা HTMX এর মাধ্যমে ক্লায়েন্ট সাইডে সরাসরি দেখানো হবে।- WebSocket Connection: ক্লায়েন্ট সংযোগ করলে WebSocket ইভেন্ট
connectট্রিগার হয়।
ধাপ ৩: HTMX এবং WebSocket এর মাধ্যমে রিয়েল-টাইম ডেটা দেখানোর জন্য HTML ফাইল তৈরি করা
templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-Time Data Update with HTMX</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
<style>
/* Content container styling */
#live-data {
border: 1px solid #ddd;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 1.2em;
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Live Time Updates</h2>
<!-- WebSocket connection using hx-ws -->
<div id="live-data" hx-ws="connect:/ws-updates" hx-swap="innerHTML">
Waiting for real-time updates...
</div>
</body>
</html>
ব্যাখ্যা
hx-ws="connect:/ws-updates": HTMX এর মাধ্যমে/ws-updatesURL এ WebSocket সংযোগ তৈরি করা হয়েছে।hx-swap="innerHTML":#live-datadiv এরinnerHTMLহিসেবে সার্ভার থেকে প্রাপ্ত বার্তা আপডেট করা হবে।Waiting for real-time updates...: প্রাথমিকভাবে এই বার্তা দেখানো হবে, যা WebSocket বার্তা আসার পর প্রতিস্থাপিত হবে।
ধাপ ৪: সার্ভার চালানো
Flask WebSocket সার্ভার চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন।
python server.py
এখন, সার্ভার চালু হলে, ব্রাউজারে http://127.0.0.1:5000 তে গিয়ে দেখুন। প্রতি ৫ সেকেন্ড পরপর #live-data div এ বর্তমান সময় রিয়েল-টাইমে আপডেট হবে।
HTMX এবং WebSocket ব্যবহারের সুবিধাসমূহ
- Real-Time Updates: HTMX এবং WebSocket এর মাধ্যমে পেজ রিফ্রেশ না করেই ডেটা সরাসরি HTML এ আপডেট করা যায়।
- Low Latency: WebSocket কম লেটেন্সির মাধ্যমে দ্রুত ডেটা ট্রান্সমিশন নিশ্চিত করে।
- Simple Integration: HTMX এর
hx-wsAttribute ব্যবহার করে সহজেই WebSocket সংযোগ তৈরি করা যায় এবং সরাসরি HTML এ ডেটা রেন্ডার করা সম্ভব।
উপসংহার
HTMX এর hx-ws Attribute এবং Flask-SocketIO ব্যবহার করে WebSocket সংযোগ তৈরি করা এবং রিয়েল-টাইম ডেটা আপডেট করা খুবই কার্যকর। HTMX এর Attribute-Based Approach ব্যবহার করে সহজেই WebSocket এর মাধ্যমে পেজের নির্দিষ্ট অংশে রিয়েল-টাইম ডেটা লোড করা যায়, যা ওয়েব অ্যাপ্লিকেশনে ইন্টারঅ্যাকটিভিটি এবং রেসপন্সিভনেস বৃদ্ধি করে।
Read more
